<script>
import {defineComponent} from 'vue'
import UButton from "../../../uni_modules/uview-ui/components/u-button/u-button.vue";
import ClientProgrammeBtn from "../client-programme-btn/index.vue";
import {AZIMUTH, AZIMUTH_VALUE_TO_LABEL} from "../../../constant";
import {STATION_STATUS_VALUE_TO_LABEL} from "../../../pages/index/home/enter/constant";

export default {
  name: "base-info-card",
  computed: {
    STATION_STATUS_VALUE_TO_LABEL() {
      return STATION_STATUS_VALUE_TO_LABEL
    },
    AZIMUTH_VALUE_TO_LABEL() {
      return AZIMUTH_VALUE_TO_LABEL
    }
  },
  components: {ClientProgrammeBtn, UButton },
  props: {
    objectCode: {
      type: String,
      default: ''
    },
    // 电站编码
    stationCode: {
      type: String,
      default: ''
    },
    // 屋顶类型
    roofType: {
      type: String,
      default: ''
    },
    // 方位角
    azimuth: {
      type: String,
      default: ''
    },
    // 倾角
    angle: {
      type: String,
      default: ''
    },
    // 业主姓名
    ownerName: {
      type: String,
      default: ''
    },
    // 联系电话
    mobile: {
      type: String,
      default: ''
    },
    // 业主地址
    ownerAddress: {
      type: String,
      default: ''
    },
    // 状态
    status: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  filters: {
    formatAzimuth(value,angle) {
      if (value !== AZIMUTH.SOUTH) {
        return `${AZIMUTH_VALUE_TO_LABEL[value] || '--'} ${angle || '0'}度`
      }
      return AZIMUTH_VALUE_TO_LABEL[value] || '--'
    }
  },
  methods: {
    toProgramme() {
      uni.navigateTo({
        url: '/pages/index/home/programme/index'
      })
    },
    // 拨打电话
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: this.$props.mobile
      })
    },
    // 跳转到详情
    toDetail() {
      uni.navigateTo({
        url: `/pages/index/home/station-detail/index?id=${this.$props.data.id}`
      })
    }
  }
}
</script>

<template>
  <view class="module">
    <view class="head cell"  @click.stop="toDetail">
      <view class="cell-bd">项目编码：{{objectCode || '--'}}</view>
      <view class="cell-ft status">{{STATION_STATUS_VALUE_TO_LABEL[status]}}</view>
    </view>
    <view class="contend"  @click.stop="toDetail">
      <!--<view class="col">代理商：业务胡</view>-->
      <view class="col grey" v-if="stationCode">
        <u--text
            suffixIcon="share-square"
            iconStyle="font-size: 18px;color:#3e8996;margin-left:5px"
            color="#3e8996"
            size="14"
            :text="`电站编码：${stationCode}`"
        ></u--text>
      </view>
      <view class="col-wrap">
        <view class="col cell">
          <view class="cell-hd item">
            <u--text
                prefixIcon="account-fill"
                iconStyle="font-size: 18px;color:#3e8996;margin-right:5px"
                color="#3e8996"
                size="14"
                :text="ownerName"
            ></u--text>
          </view>
          <view class="cell-hd item">
            <u--text
                prefixIcon="home-fill"
                iconStyle="font-size: 18px;color:#3e8996;margin-right:5px"
                color="#3e8996"
                size="14"
                :text="roofType"
            ></u--text>
          </view>
          <view class="cell-bd item">
            <u--text
                prefixIcon="file-text-fill"
                iconStyle="font-size: 18px;color:#3e8996;margin-right:5px"
                color="#3e8996"
                size="14"
                :text="azimuth | formatAzimuth(angle)"
            ></u--text>
          </view>
          <view class="cell-bd item">
            <!--<u&#45;&#45;text-->
            <!--    prefixIcon="phone-fill"-->
            <!--    iconStyle="font-size: 18px;color:#3e8996;margin-right:5px"-->
            <!--    color="#3e8996"-->
            <!--    size="14"-->
            <!--    text="联系业主"-->
            <!--    @click="toProgramme"-->
            <!--&gt;</u&#45;&#45;text>-->
          </view>
        </view>
        <view class="col" v-if="ownerAddress">
          <u--text
              prefixIcon="map"
              iconStyle="font-size: 16px;color:#3e8996;padding-right: 5px;"
              color="#000"
              size="13"
              :text="ownerAddress"
          ></u--text>
          <!--<text>-->
          <!--  <u-icon name="map" size="13" color="#3e8996"></u-icon>-->
          <!--</text>-->
          <!--<text>-->
          <!--  安徽省合肥市蜀山区荷叶地街道蔚蓝商务港D座1309室-->
          <!--</text>-->
        </view>
      </view>
    </view>
    <slot name="footer">
      <view class="footer cell">
        <view class="cell-bd see">
          <client-programme-btn />
        </view>
        <view class="cell-hd btn">
          <u-button size="small" type="error">邀请开卡</u-button>
        </view>
        <view class="cell-hd btn">
          <u-button size="small" type="error">邀请签约</u-button>
        </view>
        <view class="cell-hd btn">
          <u-button size="small" type="primary" @click="toEdit">编辑</u-button>
        </view>
      </view>
    </slot>
  </view>
</template>

<style scoped lang="scss">
.module {
  padding: 0px 10px;
  background: #fff;
  margin-bottom: 10px;
  border-radius: 5px;
  margin-top: 10px;
  font-size: 14px;
  .head{
    border-bottom: 1px dashed #eee;
    padding: 10px 0;
    .status{
      color: var(--sub-color);
      //background: var(--sub-color);
      padding: 4px 5px;
      line-height: 100%;
      border-radius: 3px;
      font-size: 12px;
    }
  }
  .contend{
    padding: 5px 0 10px 0;
    .col{
      margin-top: 5px;
      &:first-child{
        margin-top: 0;
      }
      .item{
        padding-right: 10px;
      }
    }
    .col-wrap{
      padding: 10px;
      background: #edfafd;
      border-radius: 5px;
      margin-top: 10px;
      color: #000;
    }
    .grey{
      color: #999;
    }
  }
  .footer{
    //border-top: 1px dashed #eee;
    padding: 0px 0 10px 0;
    .see{
      font-size: 12px;
    }
    .btn{
      display: inline-block;
      padding: 0 5px;
    }
  }
}
</style>
